<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>测试 Vue路由router</title>
</head>
<body>
<div id="app">
    <!-- 3.使用路由 -->
    <router-link to="/home">主页</router-link>
    <router-link to="/help">帮助页</router-link>
    <router-view></router-view>
</div>
<script src="js/vue.js"></script>
<script src="js/vue-router.js"></script>
<script>
    /* 2.创建路由 */
    /* 2.3.创建组件 */
    let home={
        template:'<h1>我是主页</h1>'
    }
    let help={
        template:'<h1>我是帮助页</h1>'
    }
    /* 2.2.创建路由对象VueRouter */
    let router = new VueRouter({
        routes:[
            //描述路由的具体规则,分发请求:根据请求匹配组件
            //     请求路径         组件名
            {path:"/home",component:home},
            {path:"/help",component:help}
        ]
    })
    /* 2.1.创建vue对象,使用新属性 */
    new Vue({
        el : "#app",
        //属性名:属性值(变量名)
        //router : router
        router //效果同上,只是简写形式
    })
</script>
</body>
</html>

